﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-culture="userManagement"></title>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-3 col-sm-4 col-xs-12">
            <div class="widget  no-padding">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon typcn typcn-th-large-outline"></i>
                    <span data-culture="organization" class="widget-caption"></span>
                </div>
                <div class="widget-body">
                    <ul id="orgTree" class="ztree" style="width:auto; overflow:auto;"></ul>
                </div>
            </div>
        </div>
        <div class="col-lg-9 col-sm-8 col-xs-12">
            <div class="widget  no-padding">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon typcn typcn-th-list"></i>
                    <span data-culture="userManagement" class="widget-caption"></span>
                </div>
                <div class="widget-body">
                    <table id="grid-data">
                        <thead>
                        <tr>
                            <th data-culture="nickName" style="text-align: center;"></th>
                            <th data-culture="loginName" style="text-align: center;"></th>
                            <th data-culture="orgName" style="text-align: center;"></th>
                            <th data-culture="email" style="text-align: center;"></th>
                            <th data-culture="phone" style="text-align: center;"></th>
                            <th data-culture="operate" style="width: 280px; text-align: center;"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr class="row-no-display">
                            <td style="text-align: center;">$nickName$</td>
                            <td style="text-align: center;">$loginName$</td>
                            <td style="text-align: center;">$orgName$</td>
                            <td style="text-align: center;">$email$</td>
                            <td style="text-align: center;">$phone$</td>
                            <td class="text-left" style="text-align: center;">
                                <a rel='editUser' class="btn btn-info btn-xs edit"><i
                                        class="fa fa-edit"></i> 编辑</a>
                                <a rel='mappingRole' class="btn btn-yellow btn-xs edit"><i
                                        class="fa  fa-key"></i><span data-culture="mappingRole">角色分配</span></a>
                                <a rel='mappingJobOrg' class="btn btn-success btn-xs edit"><i
                                        class="fa  fa-key"></i><span data-culture="mappingJobOrg">岗位分配</span></a>
                                <a rel='deleteUser' class="btn btn-danger btn-xs edit"><i
                                        class="fa fa-times"></i> 删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade form" id="editmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="widget no-padding">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon fa fa-user"></i>
                    <span class="widget-caption">用户管理</span>
                    <div class="widget-buttons">
                        <a tabindex="7" data-type="reset"><i class="fa fa-refresh"></i></a>
                        <a data-dismiss="modal">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="widget-body">
                    <div>
                        <form class="form-horizontal" role="form" id="userEditForm">
                            <div class="form-group">
                                <label class="col-sm-2 control-label no-padding-right" for="orgName">组织机构</label>
                                <input name="id" id="id" type="hidden"/>
                                <input name="orgId" id="orgId" type="hidden"/>
                                <div class="col-sm-10">
                                    <input class="form-control" id="orgName" name="orgName" type="text"
                                           readonly="readonly">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label no-padding-right" for="loginName">用户帐号</label>
                                <div class="col-sm-10">
                                    <input class="form-control" id="loginName" name="loginName" type="text"
                                           placeholder="用户帐号">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label no-padding-right" for="nickName">昵称</label>
                                <div class="col-sm-10">
                                    <input class="form-control" id="nickName" name="nickName" type="text"
                                           placeholder="昵称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label no-padding-right" for="name">姓名</label>
                                <div class="col-sm-10">
                                    <input class="form-control" id="name" name="name" type="text"
                                           placeholder="姓名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label no-padding-right" for="phone">手机</label>
                                <div class="col-sm-10">
                                    <input class="form-control" id="phone" name="phone" type="text"
                                           placeholder="姓名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label no-padding-right" for="email">电子邮箱</label>
                                <div class="col-sm-10">
                                    <input class="form-control" id="email" name="email" type="text"
                                           placeholder="姓名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label no-padding-right" for="idcard">身份证号</label>
                                <div class="col-sm-10">
                                    <input class="form-control" id="idcard" name="idcard" type="text"
                                           placeholder="姓名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label no-padding-right" for="sort">序号</label>
                                <div class="col-sm-10">
                                    <input class="form-control" id="sort" name="sort" type="text"
                                           placeholder="序号">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-8 col-sm-4" style="text-align: right">
                                    <a class="btn btn-success" href="#" id="btnSave"><i class="fa fa-check right"></i>保存</a>
                                    <a class="btn btn-danger" href="#" data-dismiss="modal"><i
                                            class="fa fa-times right"></i>关闭</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade form bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"
     aria-hidden="true" id="appTreeModal">
    <div class="modal-dialog modal-sm ">
        <div class="modal-content">
            <div class="widget no-padding">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon glyphicon glyphicon-book"></i>
                    <span data-culture="selectUser" class="widget-caption">选择用户</span>
                    <div class="widget-buttons">
                        <a data-dismiss="modal">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="widget-body ctree">
                    <ul id="appTree" class="ztree" style="width:auto; overflow:auto;"></ul>
                </div>
                <div class="modal-footer ">
                    <button data-culture="sure" type="button" id="btnMappingApp" class="btn btn-success">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="modal fade form" id="joborgmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="widget no-padding">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon fa fa-user"></i>
                    <span class="widget-caption">岗位分配</span>
                    <div class="widget-buttons">
                        <a data-dismiss="modal">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="widget-body">
                    <div>
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <div class="col-lg-6 col-sm-12">
                                    <select class="form-control" id="job" name="job" size="25">
                                    </select>
                                </div>
                                <div class="col-lg-6 col-sm-12">
                                    <ul id="roleOrgTree" class="ztree"
                                        style="width:auto; overflow:auto;border: 1px solid #d5d5d5;height: 443px; border-radius: 4px"></ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-8 col-sm-4" style="text-align: right">
                                    <a class="btn btn-success" href="#" id="btnSaveUserJobOrg"><i
                                            class="fa fa-check right"></i>保存</a>
                                    <a class="btn btn-danger" href="#" data-dismiss="modal"><i
                                            class="fa fa-times right"></i>关闭</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade form  bs-example-modal-sm" id="roleTreeModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="widget no-padding">
                <div class="widget-header bg-themeprimary">
                    <i class="widget-icon fa fa-user"></i>
                    <span class="widget-caption">角色分配</span>
                    <div class="widget-buttons">
                        <a data-dismiss="modal">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="widget-body">
                    <div >
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <div class="col-lg-12 col-sm-12">
                                    <ul id="roleTree" class="ztree"  style="width:auto; overflow:auto;border: 1px solid #d5d5d5;height: 443px; border-radius: 4px"></ul>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-4 col-sm-8" style="text-align: right">
                                    <a class="btn btn-success" href="#" id="btnSaveUserRole"><i
                                            class="fa fa-check right"></i>保存</a>
                                    <a class="btn btn-danger" href="#" data-dismiss="modal"><i
                                            class="fa fa-times right"></i>关闭</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var userObj = {
        currentNode: null,
        roleTreeObj: null,
        jobTree: null,
        orgTreeObj: null,
        roleOrgTreeObj: null,
        appTreeObj: null,
        insert: true,
        currentUser: null,
        currentRole: null,
        validateParam: {
            submitBtn: $("#btnSave"),
            submitHandler: function (obj) {
                obj.insert = userObj.insert;
                if (!userObj.insert) {
                    obj.id = userObj.currentUser.id;
                } else {
                    obj.password = "1234567";
                }
                obj.orgId = userObj.currentNode.id;
                obj.country = 0;
                obj.province = 0;
                obj.city = 0;
                obj.district = 0;
                obj.enName = obj.name;
                obj.sex = 0;
                $('#btnSave').button('loading');
                $.request('/admin/sys/user/save', obj, function (result) {
                    try {
                        $('#editmodal').modal('hide');
                        userObj.grid.ext.refresh();
                    }
                    catch (ex) {
                    }
                }).always(function () {
                    userObj.validateParam.resetBtn.trigger("reset");
                    $('#btnSave').button('reset');
                });
            },
            fields: {
                loginName: {
                    validators: {
                        notEmpty: {}
                    }
                },
                name: {
                    validators: {
                        notEmpty: {}
                    }
                },
                sort: {
                    validators: {
                        notEmpty: {},
                        dataType: {
                            dataType: 'decimal',
                            message: '只能输入数字'
                        }
                    }
                }

            }
        },
        grid: {
            keys: ['loginName', 'name'],
            url: "/admin/sys/user/query/page",
            placeholder: '登录名 姓名',
            stableparm: function () {
                return {orgId: userObj.currentNode.id};
            },
            events: {
                editUser: function (row) {
                    userObj.insert = false;
                    userObj.currentUser = row;
                    userObj.validateParam.resetBtn.trigger("reset");
                    $("#orgName").val(userObj.currentNode.orgName);
                    $.setobject(row, 'userEditForm');
                    $('#editmodal').modal('show');
                },
                deleteUser: function (row) {
                    bootbox.confirm('确认删除？', function () {
                        deleteRowList([id = row.id]);
                    });
                }, mappingRole: function (row) {
                    userObj.currentUser = row;
                    $('#roleTreeModal').modal('show');
                    initRoleTree(row.id);
                }, mappingJobOrg: function (row) {
                    userObj.currentUser = row;
                    $('#joborgmodal').modal('show');
                    $("#job").selectpicker({
                        data: {
                            url: "/admin/sys/job/query/all", key: {
                                id: 'id',
                                name: "jobName",
                                enname: 'jobName'
                            }
                        }, finish: function () {
                            $("#job").get(0).selectedIndex = 0;
                            initJobOrgTree(userObj.currentUser.id, $("#job").val());
                        }
                    });
                    $("#job").change(function () {
                        initJobOrgTree(userObj.currentUser.id, $(this).children('option:selected').val());
                    });
                }
            },
            tools: [{
                text: '新增', 'data-culture': 'add', img: 'fa fa-plus', event: function (selectItems) {
                    userObj.insert = true;
                    userObj.validateParam.resetBtn.trigger("reset");
                    if (userObj.currentNode != undefined || userObj.currentNode != null) {
                        $("#loginName").removeAttr("readOnly");
                        $('#orgId').val(userObj.currentNode.id);
                        $('#orgName').val(userObj.currentNode.orgName);
                        $('#loginName').val('');
                        $('#email').val('');
                        $('#phone').val('');
                        $('#name').val('');
                        $('#nickName').val('');
                        $('#photoPath').val('');
                        $('#idCard').val('');
                        $('#sort').val('');
                    }
                    $('#editmodal').modal('show');
                }
            }, {
                text: '编辑', 'data-culture': 'edit', img: 'glyphicon glyphicon-edit', event: function (selectItems) {
                    if (selectItems && selectItems.length == 1) {
                        userObj.insert = false;
                        userObj.validateParam.resetBtn.trigger("reset");
                        updateRow(selectItems[0]);
                    }
                    else {
                        bootbox.alert('请选择一条记录！');
                    }
                }
            }, {
                text: '删除', 'data-culture': 'delete', img: 'glyphicon glyphicon-remove', event: function (selectItems) {
                    if (selectItems && selectItems.length > 0) {
                        bootbox.confirm('确认删除？', function () {
                            var ids = [];
                            $.each(selectItems, function (i, row) {
                                ids.push(row.id);
                            });
                            deleteRowList(ids);
                        });
                    } else {
                        bootbox.alert('请选择待删除的记录！');
                    }
                }
            }]
        }
    }
    function onClick(event, treeId, treeNode) {
        userObj.currentNode = treeNode;
        userObj.grid.ext.refresh();
    }
    function initJobOrgTree(userId, jobId) {
        var checkeds = [];
        $.request('/admin/sys/user/job/org/query/userId/jobId', {jobId: jobId, userId: userId}, function (result) {
            $.each(result, function (i, v) {
                checkeds.push(v.orgId);
            });

        }, false, false)
        userObj.roleOrgTreeObj = $('#roleOrgTree').unbind().tree({
            data: {
                key: {name: 'orgName', enname: 'orgEnName'},
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: 0
                }
            },
            check: {
                enable: true
            },
            checkdata: checkeds,
            expandLevel: 3
        });
    }
    function initRoleTree(userId) {
        var checkeds = [];
        $.request('/admin/sys/user/role/query/userId', {userId: userId}, function (result) {
            $.each(result, function (i, v) {
                checkeds.push(v.roleId);
            });
        }, false, false)
        userObj.roleTreeObj = $('#roleTree').tree({
            data: {
                key: {name: 'roleName'},
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: 0,
                    url: '/admin/sys/role/query/tree'
                }
            },
            check: {
                enable: true
            },
            checkdata: checkeds,
            expandLevel: 3
        });

    }
    function updateRow(user) {
        userObj.currentUser = user;
        user.orgId = userObj.currentNode.id;
        user.orgName = userObj.currentNode.orgName;
        $.setobject(user, 'userEditForm');
        $('#editmodal').modal('show');
    }
    function deleteRowList(ids) {
        $.request('/admin/sys/user/delete/ids', {ids: ids}, function () {
            bootbox.alert("删除成功!");
            userObj.grid.ext.refresh();
        }, function () {
            bootbox.alert("删除失败!");
        })
    }
    function init() {
        $("#btnSaveUserJobOrg").click(function () {
            var nodes = userObj.roleOrgTreeObj.getCheckedNodes(true);
            var values = [];
            var jobId = $("#job").val();

            $.each(nodes, function (i, item) {
                if (!item.isParent) {
                    values.push({'userId': userObj.currentUser.id, 'jobId': jobId, 'orgId': item.id})
                }
            });
            var url = '/admin/sys/user/job/org/save';
            if (values.length == 0) {
                values.push({'userId': userObj.currentUser.id,'jobId': jobId})
                url = '/admin/sys/user/job/org/delete/userId/jobId';
            }
            $('#functionTreeModal').modal('hide');
            $.request(url, values, function (result) {
                bootbox.alert('保存成功！');
            }, function (error) {
                bootbox.alert('保存失败！');
            }, true);

        })
        $("#btnSaveUserRole").click(function () {
            var nodes = userObj.roleTreeObj.getCheckedNodes(true);
            var values = [];
            $.each(nodes, function (i, item) {
                if (!item.isParent) {
                    values.push({userId: userObj.currentUser.id, roleId: item.id});
                }
            });
            var url = '/admin/sys/user/role/save';
            if (values.length == 0) {
                values.push({userId: userObj.currentUser.id})
                url = '/admin/sys/user/role/org/delete/userId';
            }
            $('#roleTreeModal').modal('hide');
            $.request(url, values, function (result) {
                bootbox.alert('保存成功！');
            }, function (error) {
                bootbox.alert('保存失败！');
            }, true);
        })

        userObj.orgTreeObj = $('#orgTree').unbind().tree({
            data: {
                key: {name: 'orgName', enname: 'orgEnName'},
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: 0
                }
            },
            callback: {
                onClick: onClick
            }
        });
        userObj.orgTreeObj.selectNode(userObj.currentNode = userObj.orgTreeObj.getNodes()[0]);
        $("#grid-data").table(userObj.grid);
        $('#userEditForm').validate(userObj.validateParam);
    }
    function dispose() {
        userObj = {};
    }
</script>
</body>
</html>